@charset "UTF-8";

@import "_helper";
@import "_base";
@import "_normalize";
@import "_bottom-menu";

body {
	background-color: #edeff0;
}

.user-index {
	width: 100%;
	height: auto;
	display: none;
	.top {
		width: 100%;
		height: 220px;
		overflow: hidden;
		position: relative;
		text-align: center;
		&:before {
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			background-image: url(#{$PAHT_IMG}user/falling-snow2.png);
			-webkit-animation: snow 28s linear infinite;
			-moz-animation: snow 28s linear infinite;
			-ms-animation: snow 28s linear infinite;
			animation: snow 28s linear infinite;
			-webkit-transition: opacity 10s;
			-moz-transition: opacity 10s;
			-ms-transition: opacity 10s;
			transition: opacity 10s;
		}
		&:after {
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			background-image: url(#{$PAHT_IMG}user/falling-snow1.png);
			-webkit-animation: snow 18s linear infinite;
			-moz-animation: snow 18s linear infinite;
			-ms-animation: snow 18s linear infinite;
			animation: snow 18s linear infinite;
			-webkit-transition: opacity 5s;
			-moz-transition: opacity 5s;
			-ms-transition: opacity 5s;
			transition: opacity 5s;
		}
		@-moz-keyframes snow {
			0%{ background-position:center 0,0 0;}
			100%{ background-position:center 1200px,0 0;}
		}
		@-webkit-keyframes snow {
			0%{ background-position:center 0,0 0;}
			100%{ background-position:center 1200px,0 0;}
		}
		@-ms-keyframes snow {
			0%{ background-position:center 0,0 0;}
			100%{ background-position:center 1200px,0 0;}
		}
		@keyframes snow {
			0%{ background-position:center 0,0 0;}
			100%{ background-position:center 1200px,0 0;}
		}
		&.yellow {
			@include helper_bgimg('#{$PAHT_IMG}user/top-bg-yellow.png');
			background-position: left bottom;
			background-color: #ffaa31;
			.sorce {
				color: #f7e404;
			}
		}
		&.blue {
			@include helper_bgimg('#{$PAHT_IMG}user/top-bg-blue.png');
			background-position: left bottom;
			background-color: #4397e5;
			.sorce {
				color: #8ab8ff;
			}
		}
		&.red {
			@include helper_bgimg('#{$PAHT_IMG}user/top-bg-red.png');
			background-position: left bottom;
			background-color: #de1618;
			.sorce {
				color: #fb9495;
			}
		}

		.user-info {
			color: #fff;
			width: 100%;
			height: auto;
			// margin-top: 20px;
			position: absolute;
			top: 20px;
			left: 0;
			z-index: 5;
			.head {
				width: 70px;
				height: 70px;
				margin: 0 auto;
				overflow: hidden;
				// background-color: #fff;
				img {
					width: 100%;
				}
			}
			.name {
				font-size: 16px;
				margin-top: 5px;
			}
			.info {
				margin-top: 5px;
			}
		}

		.user-id {
			color: #fff;
			height: 20px;
			line-height: 20px;
			padding: 0 8px;
			border-radius: 15px;
			background-color: rgba(0,0,0,.16);
			position: absolute;
			top: 20px;
			right: 10px;
			z-index: 5;
		}

		.rank-sorce {
			color: #fff;
			width: 100%;
			height: 44px;
			background-color: rgba(0,0,0,.3);
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 5;
			>div {
				width: 50%;
				height: 100%;
				position: relative;
				float: left;
				overflow: hidden;
				&:first-child:after {
					content: "";
					width: 1px;
					height: 100%;
					background-color: rgba(255,255,255,.43);
					position: absolute;
					right: 0;
					top: 0;
					z-index: 1;
				}
			}
			.ico-team-rank {
				height: 28px;
			}
			.ico-team-cup {
				height: 28px;
			}
			.detai {
				display: inline-block;
				text-align: left;
				margin-left: 5px;
				margin-top: 3px;
				.sorce {
					font-size: 16px;
					font-weight: bold;
				}
			}
		}
		// .snow {
		// 	width: 100%;
		// 	height: 100%;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: 1;
		// 	background-image: url(#{$PAHT_IMG}user/snow-bg.png);
		// 	animation: animate-snow 12s linear infinite;
		// 	-moz-animation: animate-snow 12s linear infinite;
		// 	-webkit-animation: animate-snow 12s linear infinite;
		// }
		// @keyframes animate-snow {
		// 	0%{ background-position:center 0,0 0;}
		// 	100%{ background-position:center 850px,0 0;}
		// }
		// @-moz-keyframes animate-snow {
		// 	0%{ background-position:center 0,0 0;}
		// 	100%{ background-position:center 850px,0 0;}
		// }
		// @-webkit-keyframes animate-snow {
		// 	0%{ background-position:center 0,0 0;}
		// 	100%{ background-position:center 850px,0 0;}
		// }
	}

	.spport-rank {
		color: #1a1a1a;
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-size: 15px;
		overflow: hidden;
		background-color: #fff;
		margin-top: 10px;
		position: relative;
		text-decoration: none;
		&:active {
			background-color: #ccc;
		}
		&:after {
			content: "";
			width: 15px;
			height: 15px;
			@include helper_bgimg('#{$PAHT_IMG}user/ico-list.png');
			position: absolute;
			left: 10px;
			top: px((40-15)/2);
			z-index: 2;
		}
		&:before {
			content: "";
			width: 15px;
			height: 15px;
			@include helper_bgimg('#{$PAHT_IMG}user/ico-more.png');
			background-size: auto 100%;
			position: absolute;
			right: 5px;
			top: px((40-15)/2);
			z-index: 2;
		}
		span {
			margin-left: 35px;
		}
	}

	.fcard {
		color: #1a1a1a;
		.title {
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-size: 15px;
			font-weight: bold;
			overflow: hidden;
			background-color: #fff;
			margin-top: 10px;
			border-bottom: 1px solid #e1e1e1;
			position: relative;
			&:after {
				content: "";
				width: 15px;
				height: 15px;
				@include helper_bgimg('#{$PAHT_IMG}user/ico-gift.png');
				background-size: auto 100%;
				position: absolute;
				left: 10px;
				top: px((40-15)/2);
				z-index: 2;
			}
			span {
				margin-left: 35px;
			}
		}
		.list {
			width: 100%;
			height: 95px;
			background-color: #fff;
			overflow: hidden;
			.card {
				width: 33.33%;
				height: 80px;
				text-align: center;
				float: left;
				img {
					margin: 10px 0;
					height: 80px;
				}
			}
		}
	}
	.mbag {
		font-size: 15px;
		width: 100%;
		height: 70px;
		line-height: 70px;
		background-color: #fff;
		margin-top: 10px;
		border-bottom: 1px solid #e1e1e1;
		position: relative;
		.title {
			color: #1a1a1a;
			margin-left: 35px;
			&:after {
				content: "";
				width: 15px;
				height: 15px;
				@include helper_bgimg('#{$PAHT_IMG}user/ico-bag.png');
				background-size: auto 100%;
				position: absolute;
				left: 10px;
				top: px((70-15)/2);
				z-index: 2;
			}
			span {
				font-size: 13px;
				font-weight: normal;
				color: #ff4b27;
			}
		}
		.getcash {
			color: #fff;
			font-size: 16px;
			height: 40px;
			line-height: 40px;
			padding: 0 4%;
			background-color: #20bb5a;
			border-radius: 5px;
			margin-right: 8px;
			margin-top: px((70-40)/2);
		}
		.rechange {
			color: #fff;
			font-size: 16px;
			height: 40px;
			line-height: 40px;
			padding: 0 4%;
			background-color: #ff4b27;
			border-radius: 5px;
			margin-right: 8px;
			margin-top: px((70-40)/2);
		}		
	}

	.mbag-detail {
		color: #1a1a1a;
		font-size: 15px;
		height: auto;
		width: 100%;
		background-color: #fff;
		border-bottom: 1px solid #e1e1e1;
		margin-bottom: 20px;
		>div {
			width: auto;
			height: 40px;
			line-height: 40px;
			margin: 0 10px;
			padding: 0 5px;
			&:first-child {
				border-bottom: 1px solid #e1e1e1;
			}
		}
		table {
			width: 100%;
			.red {
				color: #ff4b27;
			}
			.green {
				color: #20bb5a;
			}
			td {
				height: 40px;
				line-height: 40px;
				text-align: center;
				border-bottom: 1px solid #e1e1e1;
				&:first-child {
					text-align: left;
					padding-left: 15px;
				}
			}
		}
	}

}

// 提现
.user-mlist {
	font-size: 16px;
	display: none;
	.mbag {
		color: #333;
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #fff;
		margin-top: 20px;
		border-bottom: 1px solid #e1e1e1;
		position: relative;
		&:after {
			content: "";
			width: 20px;
			height: 20px;
			@include helper_bgimg('#{$PAHT_IMG}user/ico-bag.png');
			background-size: auto 100%;
			position: absolute;
			left: 15px;
			top: px((40-20)/2);
			z-index: 2;
		}
		.it {
			height: 100%;
			margin-left: 45px;
			float: left;
			span {
				color: #ff4b27;
				margin-left: 15px;
			}
		}
	}
	.mcash {
		@extend .mbag;
		margin-top: 0;
		height: auto;
		min-height: 40px;
		&:after {
			@include helper_bgimg('#{$PAHT_IMG}user/ico-moeny.png');
		}
		i {
			color: #20bb5a;
			font-style: normal;
			font-size: 14px;
			height: 24px;
			line-height: 24px;
			margin: px((40-24)/2) 10px;
			padding: 0 8px;
			border: 1px solid #20bb5a;
			border-radius: 5px;
			float: right;
			display: block;
			&:active {
				color: #fff;
				background-color: #20bb5a;
				border-color: #20bb5a;
			}
		}
	}
	.tt {
		margin: 15px 0 5px 15px;
	}
	.dlist {
		color: #666;
		font-size: 14px;
		width: auto;
		height: auto;
		background-color: #fff;
		overflow: hidden;
		padding: 0 15px;
		margin-bottom: 20px;
		table {
			width: 100%;
			height: auto;
			td {
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #e1e1e1;
				span {
					color: #ff4b27;
				}
				&:last-child {
					text-align: right;
				}
			}
		}
	}
}

.w-msgbox {
    height: auto;
    position: fixed;
    z-index: 999;
    left: 14px;
    right: 14px;
    top: 50%;
    margin-top: -47px;
    background: #fff;
    border-radius: 5px;
    color: #333;
    display: none;
    .w-msgbox-close {
	    font-family: sans-serif;
	    color: #ACACAC;
	    font-size: 20px;
	    width: 32px;
	    height: 32px;
	    line-height: 32px;
	    text-align: center;
	    position: absolute;
	    right: 0;
	    top: 0;
	}
    .w-msgbox-bd {
	    padding: 15px 20px;
	}
	.w-msgbox-title {
	    text-align: center;
	    font-size: 14px;
	    font-weight: bold;
	}
	.w-msgbox-ft {
	    overflow: hidden;
	    text-align: center;
	    border-top: 1px solid #eaeaea;
	}
	.w-msgbox-ft .pro-btn {
	    height: 40px;
	    line-height: 40px;
	    font-size: 14px;
	    box-sizing: border-box;
	    color: #1E96FD;
	    border: none;
	    background: none;
	    padding: 0;
	    text-align: center;
	}
	.w-msgbox-ft-2 .pro-btn {
	    float: right;
	    width: 50%;
	    border-right: 1px solid #eaeaea;
	}
	.w-msgbox-ft .pro-btn:first-of-type {
	    font-weight: bold;
	}
	.w-msgbox-ft-2 .pro-btn:first-of-type {
	    border-right: none;
	}
	.w-msgbox ul{
	    height: auto;
	    max-height: 100px;
	    overflow-y: auto;
	    overflow-x: hidden;
	}
}

.dialog-recharge {
	width: 240px;
	height: 115px;
	overflow: hidden;
	padding: 30px 20px;
	background-color: #fff;
	border-radius: 10px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: px((-115-60)/2);
	margin-left: px(-280/2);
	z-index: 100;
	display: none;
	.red {
		color: #ff344d;
	}

	.form {
		color: #808080;
		width: 100%;
		.fl {
			font-size: 18px;
			line-height: 34px;
		}
		input {
			font-size: 18px;
			width: 150px;
			height: 32px;
			line-height: 32px;
			border: 0;
			text-align: center;
			background-color: #e6e6e6;
		}
	}

	.btn-submit {
		font-size: 17px;
		color: #fff;
		width: 100%;
		height: 34px;
		line-height: 34px;
		text-align: center;
		background: -webkit-gradient(linear, left top, right top, from(#ff314e), to(#ff7833));
		border-radius: 5px;
	}
}